import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux'
import { addSymptom, getTwoSymptomlist, getOneSymptom, UpdateSymptom, delAllSymptom, delOneSymptom } from './../../../api/symptom'
import { getKindlist } from './../../../api/kind'
import TimeShow from '../../../components/TimeShow'

import { Table, Divider, Button, Modal, Form, Input, Radio, Select, Space, Tag, Popconfirm, message } from 'antd';
const { Option } = Select;

const { TextArea } = Input;

const SymptomTwo = (props) => {
    const Symptomid = props.location.search.split("=")[1]
    // const history = useHistory();
    const [fromKind, setFromkind] = useState('')
    const [fromKind2, setFromkind2] = useState('')
    const [kindlist, setKindlist] = useState([])
    const [symptomTwolist, setSymptomTwolist] = useState([])
    useEffect(() => {
        getKindlist().then(res => {
            setKindlist(res.data.str)
        })
        getTwoSymptomlist({ Symptomid }).then(res => {
            setSymptomTwolist(res.data.data)
        })
        getOneSymptom({ Symptomid }).then(res => {
            setFromkind(res.data.data[0].fromKind)
        })

    }, [])
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isModalVisible2, setIsModalVisible2] = useState(false);
    // 编辑模态框数据
    const [showstatus2, setShowstatus2] = useState('');
    const [SymptomName2, setSymptomName2] = useState('')
    const [info2, setInfo2] = useState('')
    // 新增
    const [showstatus, setShowstatus] = useState(1);
    const [SymptomName, setSymptomName] = useState('')
    const [info, setInfo] = useState('')
    const [selectedRowKeys, setSeletRowKeys] = useState([])
    const onSelectChange = (selectedRowKeys, selectedRow) => {
        setSeletRowKeys(selectedRowKeys);
    }
    const rowSelection = {
        selectedRowKeys, //当前页面选中的项
        onChange: onSelectChange, //获取选中的值
    }
    const editIsModalVisible2 = (Symptomid) => () => {
        console.log(Symptomid)
        getOneSymptom({ Symptomid }).then(res => {
            console.log(res)
            setFromkind2(res.data.data[0].fromKind)
            setSymptomName2(res.data.data[0].SymptomName)
            setInfo2(res.data.data[0].info)
            setShowstatus2(res.data.data[0].showstatus)
            setIsModalVisible2(true)
        })
    }
    const handleOk2 = (id) => () => {
        // 编辑模态框点击更新
        console.log(id)
        // console.log(kindname2, info2, showstatus2)
        UpdateSymptom({
            Symptomid: id,
            SymptomName: SymptomName2,
            info: info2,
            showstatus: showstatus2,
            fromKind: fromKind,
        }).then(res => {
            console.log(res)
            getTwoSymptomlist().then(res => {
                setSymptomTwolist(res.data.str)
            })
            setIsModalVisible2(false)

        })
    }
    const toaddSymptom = () => {
        setIsModalVisible(true);
    }
    const handleOk = () => {
        addSymptom({
            SymptomName,
            info,
            showstatus,
            level: 2,
            uploadPerson: props.truename,
            fromKind: fromKind, //所属分类
            parentSymptom: Symptomid  //上一级症状id
        }).then(res => {
            getTwoSymptomlist({ Symptomid }).then(res => {
                setSymptomTwolist(res.data.data)
            })
            setSymptomName('')
            setInfo('')
            setShowstatus(1)
            setFromkind(fromKind)
            setIsModalVisible(false);
        })

    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    const handleChange = (value) => {
        setFromkind(value)
        console.log(`selected ${value}`);
    }
    const handleChange2 = (value) => {
        setFromkind2(value)
    }
    const handleCancel2 = () => {
        setIsModalVisible2(false)
    }
    // 确认删除
    const confirm = (Symptomid, index) => () => {
        console.log(Symptomid, index)
        delOneSymptom({ Symptomid }).then(res => {
            console.log(res)
            let arr1 = JSON.parse(JSON.stringify(symptomTwolist))
            arr1.splice(index, 1)
            setSymptomTwolist(arr1)
        })
        message.success('删除成功');
    }
    const delAll = () => {
        delAllSymptom(selectedRowKeys).then(res => {
            if (res.data.code) {
                getTwoSymptomlist({ Symptomid }).then(res => {
                    setSymptomTwolist(res.data.data)
                })
            }
        })
    }
    // 取消删除
    function cancel(e) {
        console.log(e);
    }
    const columns = [

        {
            align: 'center',
            title: '症状名称',
            dataIndex: 'SymptomName',
        },
        {
            align: 'center',
            title: '级别',
            dataIndex: 'level',
            render: text => <span>{text === 1 ? '一级' : '二级'}</span>,
        },
        {
            align: 'center',
            title: '状态',
            dataIndex: 'showstatus',
            render: text => <span>{text === 1 ? '显示' : '不显示'}</span>,
        },
        {
            align: 'center',
            title: '备注',
            dataIndex: 'info',
        },
        {
            align: 'center',
            title: '上传人',
            dataIndex: 'uploadPerson',
        },
        {
            align: 'center',
            title: '添加时间',
            dataIndex: 'createTime',
            render: (text, record, index) => {
                return TimeShow({ time: text })
            }
        },
        {
            title: '操作',
            render: (text, record, index) => {
                return <Space>
                    <Tag color="#f50" onClick={editIsModalVisible2(record.Symptomid)}>编辑</Tag>
                    {/* 编辑模态框 */}
                    <Modal title="修改一级症状" visible={isModalVisible2} onOk={handleOk2(record.Symptomid)} onCancel={handleCancel2}>
                        <Form labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}
                            requiredMark={false}>

                            <Form.Item
                                label="二级症状名称"
                                rules={[{ required: true, message: '分类名称不能为空' }]}
                            >
                                <Input style={{ width: 160 }} placeholder="请输入" value={SymptomName2} onChange={(e) => { setSymptomName2(e.target.value) }} />
                            </Form.Item>
                                
                            <Form.Item
                                label="药品分类"
                            >
                                <Select defaultValue={fromKind2} placeholder={fromKind2} style={{ width: 120 }} onChange={handleChange2} >
                                    {
                                        kindlist.map(item => {
                                            return <Option key={item.kindid} value={item.kindname}>{item.kindname}</Option>
                                        })
                                    }
                                </Select>
                            </Form.Item>
                            <Form.Item
                                label="备注"
                                rules={[{ required: true, message: '备注不能为空' }]}
                            >
                                <TextArea rows={4} allowClear={true} maxLength={140} showCount={true} value={info2} onChange={(e) => { setInfo2(e.target.value) }} />
                            </Form.Item>

                            <Form.Item
                                label="是否显示"
                            >
                                <Radio.Group onChange={(e) => { setShowstatus2(e.target.value) }} value={showstatus2} >
                                    <Radio value={1}>是</Radio>
                                    <Radio value={2}>否</Radio>
                                </Radio.Group>
                            </Form.Item>
                        </Form>
                    </Modal>
                    <Popconfirm
                        title="你确定要删除这个药品吗？"
                        onConfirm={confirm(record.kindid, index)}
                        onCancel={cancel}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Tag color="#f50">删除</Tag>
                    </Popconfirm>
                </Space>
            }
        },
    ];
    const data = symptomTwolist;

    return (
        <div>
            <div className="kindbtn">
                <h1>二级症状</h1>
                <Button onClick={() => { props.history.goBack() }}>返回</Button>
            </div>
            <Divider />
            <div className="kindlist">
                <div style={{ display: 'flex' }}>
                    <h1>二级症状列表</h1>
                    <Button style={{ marginLeft: '10px' }} onClick={delAll}>批量删除</Button>
                </div>
                <Button onClick={toaddSymptom}>新增症状</Button>
                {/* 新增模态框 */}
                <Modal title="新增二级症状" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <Form labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}
                        requiredMark={false}>

                        <Form.Item
                            label="二级症状名称"
                            rules={[{ required: true, message: '名称不能为空' }]}
                        >
                            <Input style={{ width: 160 }} placeholder={fromKind} value={SymptomName} onChange={(e) => { setSymptomName(e.target.value) }} />
                        </Form.Item>

                        <Form.Item
                            label="药品分类"
                        >
                            <Select defaultValue={fromKind} style={{ width: 120 }} onChange={handleChange} disabled>
                                {
                                    kindlist.map(item => {
                                        return <Option key={item.kindid} value={item.kindname}>{item.kindname}</Option>
                                    })
                                }
                            </Select>
                        </Form.Item>

                        <Form.Item
                            label="备注"
                            rules={[{ required: true, message: '备注不能为空' }]}
                        >
                            <TextArea rows={4} allowClear={true} maxLength={140} showCount={true} value={info} onChange={(e) => { setInfo(e.target.value) }} />
                        </Form.Item>

                        <Form.Item
                            label="是否显示"
                        >
                            <Radio.Group onChange={(e) => { setShowstatus(e.target.value) }} value={showstatus} >
                                <Radio value={1}>是</Radio>
                                <Radio value={2}>否</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
            <div>
                <Table
                    rowSelection={rowSelection}
                    columns={columns}
                    dataSource={data}
                    rowKey={record => record.kindid}
                />
            </div>
        </div>
    )
}

export default connect(state => ({//设置状态 获取这些值
    truename: state.getIn(['user', 'truename']) //获取用户名
}), dispatch => ({

}))(SymptomTwo)
